<template>
  <div class="home-page">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-banner">
      <div class="banner-content">
        <div class="welcome-info">
          <h1 class="welcome-title">欢迎回来，{{ userStore.userName || '用户' }}！</h1>
          <p class="welcome-subtitle">{{ getGreeting() }}，开始您的团队评估之旅</p>
        </div>
        <div class="user-avatar">
          <el-avatar :size="64" class="avatar">
            {{ userStore.userName?.charAt(0) || 'U' }}
          </el-avatar>
        </div>
      </div>
    </div>

    <div class="dashboard-content">
      <!-- 数据概览 -->
      <div class="stats-overview">
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon teams">
                <el-icon size="28"><UserFilled /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalTeams }}</div>
                <div class="stat-label">活跃团队</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon assessments">
                <el-icon size="28"><DataAnalysis /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalAssessments }}</div>
                <div class="stat-label">进行中测评</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon users">
                <el-icon size="28"><User /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalUsers }}</div>
                <div class="stat-label">系统用户</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon reports">
                <el-icon size="28"><Document /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalReports }}</div>
                <div class="stat-label">完成报告</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 快捷操作 -->
      <div class="quick-actions">
        <h3 class="section-title">快捷操作</h3>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="action-card" @click="handleQuickAction('start-assessment')">
              <div class="action-icon primary">
                <el-icon size="24"><Edit /></el-icon>
              </div>
              <div class="action-content">
                <h4>开始测评</h4>
                <p>参与团队角色测评活动</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="action-card" @click="handleQuickAction('view-reports')">
              <div class="action-icon success">
                <el-icon size="24"><TrendCharts /></el-icon>
              </div>
              <div class="action-content">
                <h4>查看报告</h4>
                <p>查看和下载测评分析报告</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="action-card" @click="navigateTo('/dashboard/assessment/team')">
              <div class="action-icon warning">
                <el-icon size="24"><Plus /></el-icon>
              </div>
              <div class="action-content">
                <h4>管理团队</h4>
                <p>创建和管理评估团队</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 活动与待办 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="content-card recent-activities">
            <div class="card-header">
              <h3 class="section-title">最近活动</h3>
              <el-button type="text" size="small" @click="viewAllActivities">查看全部</el-button>
            </div>
            <div class="activities-list">
              <div
                v-for="activity in recentActivities.slice(0, 4)"
                :key="activity.id"
                class="activity-item"
              >
                <div class="activity-dot"></div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="content-card todo-list">
            <div class="card-header">
              <h3 class="section-title">待办事项</h3>
              <el-button type="text" size="small" @click="viewAllTodos">查看全部</el-button>
            </div>
            <div class="todos-list">
              <div
                v-for="todo in todoList.slice(0, 4)"
                :key="todo.id"
                class="todo-item"
                @click="handleTodoClick(todo)"
              >
                <div class="todo-priority" :class="todo.priority"></div>
                <div class="todo-content">
                  <div class="todo-title">{{ todo.title }}</div>
                  <div class="todo-deadline">{{ todo.deadline }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  DataAnalysis,
  User,
  Document,
  Plus,
  Edit,
  TrendCharts
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 获取问候语
const getGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 12) return '早上好'
  if (hour < 18) return '下午好'
  return '晚上好'
}

// 导航方法
const navigateTo = (path) => {
  router.push(path)
}

// 统计数据
const stats = ref({
  totalTeams: 12,
  totalAssessments: 8,
  totalUsers: 156,
  totalReports: 24
})

// 最近活动数据
const recentActivities = ref([
  {
    id: 1,
    title: '产品研发团队完成角色测评',
    time: '2小时前'
  },
  {
    id: 2,
    title: '新用户 张三 加入系统',
    time: '4小时前'
  },
  {
    id: 3,
    title: '市场营销团队开始了新一轮测评',
    time: '1天前'
  },
  {
    id: 4,
    title: '生成了人力资源团队的分析报告',
    time: '2天前'
  }
])

// 待办事项
const todoList = ref([
  {
    id: 1,
    title: '完成个人角色测评',
    deadline: '今天 18:00',
    priority: 'high'
  },
  {
    id: 2,
    title: '审核测评报告',
    deadline: '明天 12:00',
    priority: 'medium'
  },
  {
    id: 3,
    title: '更新团队信息',
    deadline: '本周五',
    priority: 'low'
  },
  {
    id: 4,
    title: '系统培训安排',
    deadline: '下周一',
    priority: 'medium'
  }
])

// 方法
const handleQuickAction = (action) => {
  switch (action) {
    case 'start-assessment':
      router.push('/dashboard/assessment/entry')
      break
    case 'view-reports':
      router.push('/dashboard/assessment/report')
      break
    default:
      ElMessage.info('权限不够...')
  }
}

const viewAllActivities = () => {
  ElMessage.info('查看全部活动权限不够...')
}

const viewAllTodos = () => {
  ElMessage.info('查看全部待办事项权限不够...')
}

const handleTodoClick = (todo) => {
  ElMessage.info(`处理待办事项：${todo.title}`)
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: #f8fafc;
  padding: 24px;
}

/* 欢迎横幅 */
.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.welcome-info {
  flex: 1;
}

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.user-avatar {
  margin-left: 24px;
}

.avatar {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-size: 24px;
  font-weight: 600;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

/* 仪表板内容 */
.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 统计概览 */
.stats-overview {
  margin-bottom: 8px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #f1f5f9;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
}

.stat-icon.teams {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.assessments {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.users {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.reports {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.stat-label {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

/* 快捷操作 */
.quick-actions {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f5f9;
}

.section-title {
  margin: 0 0 20px 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
}

.action-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.action-card:hover {
  background: white;
  border-color: #3b82f6;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.action-icon.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-icon.success {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.action-icon.warning {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.action-content {
  flex: 1;
}

.action-content h4 {
  margin: 0 0 4px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.action-content p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

/* 内容卡片 */
.content-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f5f9;
  height: fit-content;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

/* 活动列表 */
.activities-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.activity-item:hover {
  background: #f8fafc;
}

.activity-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  margin-top: 6px;
  margin-right: 12px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.4;
}

.activity-time {
  color: #9ca3af;
  font-size: 12px;
}

/* 待办列表 */
.todos-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.todo-item:hover {
  background: #f8fafc;
}

.todo-priority {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  margin-right: 12px;
  flex-shrink: 0;
}

.todo-priority.high {
  background: #ef4444;
}

.todo-priority.medium {
  background: #f59e0b;
}

.todo-priority.low {
  background: #10b981;
}

.todo-content {
  flex: 1;
}

.todo-title {
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.todo-deadline {
  color: #6b7280;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-page {
    padding: 16px;
  }

  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .user-avatar {
    margin-left: 0;
  }
}
</style>
